<template>
	<view class="_pad-bottom-90" style="min-height: 100vh;">
		<view class="_pad-20 _white-bg _mar-bottom-10 _flex-col-mid">
			<view class="_font-16 _w-max _text-center _mar-bottom-5">预付租金(含保障服务)</view>
			<view class="_flex-row-mid _b _mar-bottom-5" style="color: #FF3535;">
				<text>￥ 
					<text class="_font-28">{{order_detail.price}}</text>
				</text>
			</view>
			<view class="_font-12 _grey-99" v-if="false">请于 
				<text class="_black">{{'2020-09-14'}} {{'11:00'}}</text>前完成支付
			</view>
		</view>
		<view class="_white-bg">
			<view class="_pad-x-10 _pad-y-20 _border-bottom _flex-row-bet _font-14" @click="payment = 'yue'">
				<view class="_flex-row-mid">
					<image class="_w-15 _h-15 _mar-right-10" src="/pages/car_sub/static/image/yuepay-ico.png" mode=""></image>
					<view>余额支付 <text class="_grey-99 _font-12">（{{now_money}}）</text> </view>
				</view>
				<radio :checked="payment == 'yue'" />
			</view>
			<view class="_pad-x-10 _pad-y-20 _border-bottom _flex-row-bet _font-14" @click="payment = 'weixin'">
				<view class="_flex-row-mid">
					<image class="_w-15 _h-15 _mar-right-10" src="/pages/car_sub/static/image/wechatpay-ico.png" mode=""></image>
					<view>微信支付</view>
				</view>
				<radio :checked="payment == 'weixin'" />
			</view>
			<view class="_pad-x-10 _pad-y-20 _flex-row-bet _font-14" @click="payment = 'Offline'" v-if="false">
				<view class="_flex-row-mid">
					<image class="_w-15 _h-15 _mar-right-10" src="/pages/car_sub/static/image/Offline-ico.png" mode=""></image>
					<view>线下支付</view>
				</view>
				<radio :checked="payment == 'Offline'" />
			</view>
		</view>
		<view class="_pad-x-10 _border-top _w-max _white-bg" v-if="payment == 'Offline'">
			<view class="_flex-row-bet-mid _pad-y-15 _border-bottom">
				<view class="">
					<view class="_font-14 _mar-bottom-5">上传付款凭证</view>
					<view class="_flex-row-mid _font-12 _grey-99">
						<view class="iconfont icon-wenhao1 _mar-right-5" style="font-size: 24rpx;"></view>
						<view class="">线下付款后请截图保存作为凭证</view>
					</view>
				</view>
				<view class="">
					<view class="_w-75 _h-75 _flex-row-center-mid" @click="upLoad" v-if="offlineImage.length == 0" style="border-radius: 12rpx;border: 2rpx solid #EAEAEA;">
						<view class="iconfont icon-xiangji _grey-99"></view>
					</view>
					<view class="_w-75 _h-75 _pos-rel" v-for="(item,index) in offlineImage">
						<image @click="chickImage(index)" class="_w-max _h-max" style="border-radius: 12rpx;" :src="item" mode=""></image>
						<view @click.stop="delImage(index)" class="iconfont icon-guanbi3 _border-circle _pos-abs _z-index-1 _white" style="background-color: rgba(0,0,0,0.3);top: -10rpx; right:-10rpx;"></view>
					</view>
				</view>
			</view>
			<view class="_pad-y-15 _grey-99 _font-12">
				<view class="_flex-row-bet-mid _mar-bottom-5">
					<view class="">·转账至银行账号 {{'6288 6611 8888 9999 000'}}</view>
					<view class="_flex-row-mid" style="color: #BE9D78;" @click="copy('data')">
						<view class="_mar-right-5 iconfont icon-Copy"></view>
						<view>点击复制</view>
					</view>
				</view>
				<view class="_mar-bottom-5">·或者点击保存收款码，到支付宝扫码支付</view>
				<view class="_mar-bottom-5">·需了解更多详情，请咨询客服</view>
				<image @click="chickQrcode(alipay_qrcode)" class="_w-100 _h-100 " style="border-radius: 12rpx;background-color: #000;" src="" mode=""></image>
			</view>
		</view>
		<view v-if="popup.isShow" class="_pos-fixed _w-max _h-max _left _top _flex-row-center-mid _pad-x-60 _z-index-3" style="background-color: rgba(0,0,0,0.3);">
			<view class="_pos-rel _flex-col-mid _pad-y-20 _w-max _white-bg _font-14" style="border-radius: 20rpx;">
				<image class="_w-120 _h-85" src="/pages/car_sub/static/image/success.png" mode=""></image>
				<view class="_mar-bottom-5">{{popup.title}}</view>
				<view class="_mar-bottom-25">如果疑问请联系客服解答哟</view>
				<navigator open-type="redirectTo" :url="'/pages/car_sub/order/detail?order_id='+order_id" class="_text-center _w-130 _pad-y-5 _white theme-color-bg" style="border-radius: 200rpx;">
					查看订单详情
				</navigator>
				<view @click="toOrderList" class="_pos-abs _white iconfont icon-guanbi3 _b" style="font-size: 46rpx;bottom: -100rpx;"></view>
			</view>
		</view>
		<view class="_w-max _pos-fixed _bottom _left _white-bg _pad-x-10 _pad-y-20 _text-center _font-16 _white _z-index-2">
			<view class="_w-max theme-color-bg _pad-y-10" @click="submit" style="border-radius: 200rpx;">提交订单</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		getOrderDetail,
		payOrder
	} from '@/api/car.js';
	export default {
		data() {
			return {
				payment: 'weixin',
				offlineImage: [], //凭证
				alipay_qrcode: '', //收款码
				popup: {
					title: '',
					type: 0,
					isShow: false,
				},
				now_money: 0,
				order_id: 0,
				order_detail: {},
				is_sumbit: false
			};
		},
		onLoad(options) {
			if (options.order_id) {
				this.order_id = options.order_id;
			} else {
				uni.showToast({title: '参数错误',icon: 'none'});
				setTimeout(function() {
					uni.switchTab({
						url: '/pages/car_index/order_list'
					})
				}, 800)
			}
		},
		onShow() {
			this.getUserInfo();
			this.getOrderDetail();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				let that = this;
				getUserInfo().then((res) => {
					that.now_money = res.data.now_money;
				}).catch((err) => {
					uni.showToast({
						title: '用户信息获取失败',
						icon: 'none'
					})
				})
			},
			getOrderDetail() {
				let that = this;
				let data = {
					order_id: that.order_id
				}
				getOrderDetail(data).then(res => {
					that.order_detail = res.data
				}).catch(err => {
					uni.showToast({title: err,icon: 'none'});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/car_index/order_list'
						})
					}, 800)
				})
			},
			// 上传凭证
			upLoad() {
				let that = this;
				let opt = {};
				opt.url = 'upload/image';
				that.$util.uploadImageChange(opt, (res) => {
					if (res.data.url != '') {
						that.offlineImage.push(res.data.url);
					}
				})
			},
			//删除凭证
			delImage(index) {
				this.offlineImage.splice(index, 1);
			},
			//查看凭证
			chickImage() {
				let that = this;
				uni.previewImage({
					current: 0,
					urls: that.offlineImage,
				})
			},
			//复制
			copy(data) {
				uni.setClipboardData({
					data: data,
					success: () => {
						uni.showToast({icon: 'none',title: '复制成功'});
					}
				});
			},
			//查看收款码
			chickQrcode(img) {
				let array = [];
				array[0] = img;
				uni.previewImage({
					current: 0,
					urls: array,
				})
			},
			//支付
			submit() {
				let that = this;
				if (that.is_sumbit) {
					return uni.showToast({title: '请求过于频繁，请稍后',icon: 'none'});
				}
				if (that.payment == 'yue') {
					if (parseFloat(that.now_money) < parseFloat(that.order_detail.price)) {
						return uni.showToast({title: '余额不足',icon: 'none'});
					}
				}
				let params = {
					order_id: that.order_id,
					pay_type: that.payment
				}
				that.is_sumbit = true;
				uni.showLoading();
				payOrder(params).then(res => {
					uni.hideLoading()
					if (that.payment == 'weixin') {
						that.wxplay(res.data.result.jsConfig)
					}
					if (that.payment == 'yue') {
						setTimeout(() => {
							that.popup.title = '已提交订单';
							that.popup.isShow = true;
						}, 600)
					}
				}).catch(res => {
					uni.hideLoading()
					that.is_sumbit = false;
					uni.showToast({title: res,icon: "none"})
					that.checked = true;
				})
			},
			wxplay(data) { //微信支付方法
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timestamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success() {
						that.is_sumbit = false;
						setTimeout(() => {
							that.popup.title = '已提交订单';
							that.popup.isShow = true;
						}, 600)
					},
					fail(err) {
						that.is_sumbit = false;
						uni.showToast({title: '订单取消成功',icon: "none"})
						that.checked = true;
					}
				})
			},
			//前往订单列表
			toOrderList() {
				uni.switchTab({
					url: '/pages/car_index/order_list'
				})
			},
		},
	}
</script>

<style scoped lang="scss">
</style>